<template>

  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="题目详情"
    width="60%"
    @close="handleClose"
  >

    <div v-if="detail && detail.qu && detail.qu.quType">
      <qu-item-show :value="detail.qu" :show-analysis="true" :index="0" :mode="3" :review-state="1" :show-type="true" />

      <div v-if="detail.qu.quType === 'mix'">
        <div v-for="(sub,jj) in detail.qu.subList" :key="sub.id">
          <qu-item-show :value="sub" :index="jj" :mode="3" :show-type="true" :sub="true" />
        </div>
      </div>

    </div>

    <div v-if="detail.favNote">
      <div class="note-tt">题目笔记：</div>
      <div class="as-box" v-html="detail.favNote">{{ detail.favNote }}</div>
    </div>

    <el-divider />

    <div>
      <qu-mark-item
        v-if="detail && detail.id"
        :repo-id="detail.refId"
        :qu-id="detail.quId"
        @note="initValue"
      />
    </div>
  </el-dialog>

</template>

<script>
import { bookDetail } from '@/api/client/repo/book'
import QuMarkItem from '@/views/web/repo/components/QuMarkItem/index.vue'
import QuItemShow from '@/views/admin/repo/qu/components/QuItemShow.vue'

export default {
  name: 'BookDetailDialog',
  components: { QuItemShow, QuMarkItem },
  props: {
    id: String,
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      detail: {}
    }
  },

  watch: {
    id: {
      handler() {
        this.initValue()
      }
    },
    visible: {
      handler() {
        this.dialogVisible = this.visible
      }
    }
  },

  created() {
    this.dialogVisible = this.visible
    this.initValue()
  },

  methods: {

    // 初始化数据
    initValue() {
      if (!this.id) {
        return
      }
      bookDetail(this.id).then(res => {
        this.detail = res.data
      })
    },

    // 关闭回调
    handleClose() {
      this.$emit('update:visible', false)
    }

  }
}
</script>

<style scoped>

.note-tt{
  color: #1890ff;
  font-weight: 700;
  font-size: 14px;
}
</style>

